<script setup>
import { ref } from 'vue'
import uploadBtn from './uploadBtn.vue'
const props = defineProps({
	corpImportVisible: Boolean,
	default: false
})

const emits = defineEmits(['changecorpImportVisible'])
const close = () => {
	emits('changecorpImportVisible', false)
}
</script>
<template>
	<el-dialog v-model="props.corpImportVisible" :center="true" title="导入企业话术" width="40%" @close="close">
		<div class="model-box">
			<p class="title">第一步： 下载导入模版，按照模版填写内容</p>
			<div class="item-block">
				<img
					src="../../../../assets/img/img/shop-manage_order-csv-icon.b69987ff421a.png"
					alt=""
				/>
				<p class="button-text">下载导入模板</p>
			</div>
			<p class="title">第二步： 上传文件，将填写好的模版上传</p>
			<div class="item-block">
				<uploadBtn />
			</div>
		</div>
		<template #footer>
			<div class="dialog-footer">
				<div>
					<el-button class="btn-cancal" @click="close">取消</el-button>
					<el-button class="btn-cancal" type="primary" @click="close"> 导入 </el-button>
				</div>
			</div>
		</template>
	</el-dialog>
</template>
<style lang="scss" scoped>
:deep(.uploader .btn-upload) {
	background: #fff;
}
:deep(.uploade) {
	margin-top: 0;
}
.btn-cancal {
	width: 74px;
	height: 32px;
}
.model-box {
	.title {
		font-size: 14px;
		color: #000000a6;
	}
	.item-block {
		display: flex;
		align-items: center;
		margin-top: 8px;
		padding-left: 58px;
		margin-bottom: 20px;
		img {
			width: 20px;
			height: 20px;
			margin-right: 8px;
		}
		.button-text {
			font-size: 14px;
			color: #1890ff;
		}
	}
}
.dialog-footer {
	display: flex;
	justify-content: flex-end;
	width: 100%;
	padding-left: 25px;
}
</style>
